<template>
    <div class="banner">
        <el-row>
            <el-col :span="19" style="margin-top:15px;color:#f00">建议上传的图片宽高比为2:1,banner效果会比较好</el-col>
            <el-col :span="5" >
                <el-button type="primary" icon="plus" @click="addFormVisible = true">新增banner</el-button>
             </el-col>
        </el-row>
        <div class="divline"></div>

        <!-- 列表 -->
        <el-table :data="tableData" border style="width: 99%" align='center'>
             <el-table-column type="expand">
                <template scope="props">  
                 <el-row>
                    <el-col :span="4" >
                         <img :src="props.row.image" style="height:100px;"></img>
                    </el-col>
                    <el-col :span="20" >
                        <p class="p-expanded-title"></p>
                        <p class="p-expanded-title">banner创建时间: <span class="span-expanded-content">{{props.row.createdAt.replace('.000Z','').replace('T',' ')}} </span> </p>
                        <p class="p-expanded-title">banner最后修改时间: <span class="span-expanded-content">{{props.row.updatedAt.replace('.000Z','').replace('T',' ')}}</span></p>
                        <p class="p-expanded-title">banner跳转地址: <span class="span-expanded-content">{{props.row.url}}</span></p>
                        <p class="p-expanded-title">banner展示图片地址: <span class="span-expanded-content">{{props.row.image}}</span></p>                   
                    </el-col>
                 </el-row>
                    
                </template>
            </el-table-column>
            <el-table-column
                :prop="title.info.prop"
                :sortable="title.info.sortable"
                :label="title.info.label"
                :align="title.style.align"
                :width="title.style.width">
            </el-table-column>
            <el-table-column
                :prop="describe.info.prop"
                :sortable="describe.info.sortable"
                :label="describe.info.label"
                :align="describe.style.align"
                :width="describe.style.width">
            </el-table-column>
            <el-table-column
                :prop="remark.info.prop"
                :sortable="remark.info.sortable"
                :label="remark.info.label"
                :align="remark.style.align"
                :width="remark.style.width">
            </el-table-column>
            <el-table-column
                :prop="status.info.prop"
                :sortable="status.info.sortable"
                :label="status.info.label"
                :align="status.style.align"
                :width="status.style.width"
                :formatter="formatterStatu"
                :filters="status.filter.list"
                :filter-method="filterStatu"
                :filter-multiple="status.filter.multiple">
            </el-table-column>

            <el-table-column label="操作" align="center" v-if="checkLevel()">
                <template scope='scope'>
                    <el-checkbox style="margin-left:10px" v-model="scope.row.checked" @change='onCheckedChange((scope.row))'>启用</el-checkbox>
                    <el-button type="danger" icon='delete' size="mini" @click='onDeleteBanner(scope.row,scope.$index)'></el-button>
                    <el-button type="info" size="mini" @click='onMoveTop(scope.row,scope.$index)'>置顶</el-button>
                </template>
            </el-table-column>
            
        </el-table>

        <!-- 添加 -->
        <el-dialog title="添加banner" v-model="addFormVisible">
            <el-form :model="bannerForm" :rules="rules" ref="bannerForm" style="width: 80%" label-width="30%">
                <el-form-item prop="title" label="标题">
                    <el-input 
                        placeholder="请输入banner标题"
                        v-model="bannerForm.title" >
                    </el-input>
                </el-form-item>
                <el-form-item prop="describe" label="描述"
                    :rules="[{required: false}]">
                    <el-input 
                        placeholder="请输入banner描述"
                        v-model="bannerForm.describe" >
                    </el-input>
                </el-form-item>
                <el-form-item prop="image" label="图片路径"
                    >
                    <el-input 
                        placeholder="请输入banner图片路径(建议上传的图片宽高比为2:1)"
                        v-model="bannerForm.image" >
                    </el-input>
                </el-form-item>
                <el-form-item prop="url" label="跳转路径"
                    >
                    <el-input 
                        placeholder="请输入banner跳转路径"
                        v-model="bannerForm.url" >
                    </el-input>
                </el-form-item>
                 <el-form-item prop="remark" label="备注"
                    :rules="[{required: false}]">
                    <el-input 
                        placeholder="请输入banner备注"
                        v-model="bannerForm.remark" 
                        type="textarea" :rows="1">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('bannerForm')">提交</el-button>
                <el-button type="primary" @click="resetForm('bannerForm')">重置信息</el-button>
                <el-button @click="addFormVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import BannerJs from './Banner.js';
    module.exports = BannerJs;
</script>
<style scoped>
  .divline {
    margin-top: 10px;
    margin-bottom: 20px;
    height:1px;
    width:100%;
    background:#999;
    overflow:hidden;
  }     
  .p-expanded-title {
    color:#000;
  }
  .span-expanded-content {
    margin-left:10px;
    margin-right:30px;
    color:#777;
  }
</style>
